/**
 * Paging module
 */
import React, { Component } from 'react';
import classnames from 'classnames';
import { bindActionCreators } from 'redux';
import PagingItem from './PagingItem';
import { connect } from 'dva';
import pagesActions from '../../../actions/Editor/pages';

class Paging extends Component {
    constructor(props) {
        super(props);
        this.state = {
            reorder: false,
            keys: [],
            nowPages: [],
        };
    }
    componentDidMount() {
        this.initPageSortbale();
    }

    handleOnAddPage() {
        const { addPage } = this.props;
        addPage();
    }
    initPageSortbale() {
        const $element = $('.pages-container');
        let from;
        let to;
        let keys = [];
        let nowPages = [];
        const reorderPages = this.props.reorderPages;
        const start = (event, ui) => {
            from = ui.item.index();
            keys = [];
        };
        const update = (event, ui) => {
            to = ui.item.index();
            nowPages = [...this.props.pages];
            nowPages.splice(to, 0, nowPages.splice(from, 1)[0]);
            if (!nowPages.length) return;
            for (let i = 0, m = nowPages.length; i < m; i++) {
                nowPages[i].title = i + 1;
                keys.push(nowPages[i].page_id);
            }
        };
        const stop = () => {
            reorderPages(nowPages);
        };

        $element.sortable({
            axis: 'x',
            revert: 10,
            distance: 5,
            start,
            update,
            stop,
            tolerance: 'pointer',
            scrollSensitivity: 300,
            forcePlaceholderSize: true,
            placeholder: 'sortable-placeholder',
        }).sortable('option', 'items', '.btg-page');
    }
    render() {
        const { fromTemplate, pages, selectedPageId, selectPage, removePage } = this.props;
        const nowPages = this.state.reorder ? this.state.nowPages : pages;
        return (
          <div className="addpaging creator-panel creator-pages-nav">
            <div className={classnames('addpage', 'pages-tool', fromTemplate ? 'hide' : '')}>
              <a href="javascript:;" onClick={() => this.handleOnAddPage()}>
                <img style={{ marginTop: '-10px' }} src="/static/new_version/image/icon/iconfont-jiafangda.svg" width="10" />
              </a>
              <div className="recta_left recta_div" />
              <div className="recta_right recta_div" />
              <div className="wgt-page-add" />
            </div>
            <div className="pages-container">
              {
                nowPages.map((page) => {
                    return (
                      <PagingItem
                        key={page.page_id} fromTemplate={fromTemplate} length={pages.length}
                        selectPage={selectPage} removePage={removePage}
                        focus={selectedPageId === page.page_id} page={page}
                      />
                    );
                })
            }
            </div>
          </div>
        );
    }
}

const mapStateToProps = ({ pages, editor }) => {
    return {
        pages,
        fromTemplate: editor.fromTemplate,
        selectedPageId: editor.selectedPageId,
    };
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators(pagesActions, dispatch);
};


export default connect(mapStateToProps, mapDispatchToProps)(Paging);
